<style>
.user-content{
	display: flex;
	flex-direction: column;
	width: 100%;
}
.info{
	padding: 30upx 70upx 40upx;
	/* padding:  70upx 70upx 40upx; */
	display: flex;
    align-items: center;
	/* background: #229FF4; */
	background: #0faeff;
	position: relative;
}
.scanbtn{
	position: absolute;
	top: 30upx;
	right: 16upx;
}
.scanbox{
	
}
.avator{
	width: 120upx;
	height: 120upx;
	border-radius: 50%;
}
.name{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-left: 30upx;
	color: #fff;
}
.login-box{
	padding-left: 40upx;
}
.login-box button{
	display: inline-block;
	font-size: 30upx;
}
.login-box .login{
	float: right;
}
.login-box .login:after{
	border: 1px solid #fff;
}
.coupon{
	width: 100%;
	display: flex;
	border-top: 1upx solid lightgray;
	border-bottom: 1upx solid lightgray;
}
.coupon .coupon-item{
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	padding: 70upx 0;
	font-size: 40upx;
}
.coupon .coupon-item.yue{
	border-right: 1upx solid lightgray;
}
.tabs-title{
	display: flex;
	flex: 1;
	padding: 22upx 0;
}
.tabs-title .tab-item{
	display: flex;
	flex: 1;
	justify-content: center;
}
/* 押金-积分 -增值金 */
.integral{
	display: flex;
	flex-direction: row;
	padding: 30upx 0;
	border-bottom: 1upx solid #e6e6e6;
}
.integral .item{
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items:center;
	position: relative;
}
.integral .item .border{
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -20upx;
	height: 40upx;
	width: 3upx;
	background: #e6e6e6;
}
.uni-list:before{
	height: 0;
}
.uni-list-cell:after{
	left: 0;
}
.company{
	padding: 50upx 30upx;
	text-align: center;
	font-size: 28upx;
	color: #777;
}
.logout{
	border: none;
    border-radius: 0;
    margin-top: 40upx;
}
.changepwd{
	border: none;
	border-radius: 0;
	margin-top: 40upx;
}
</style>

<template>
    <view class="user-content">
		<div class="info">
			<!-- <div class="scanbtn" v-if="userInfo.uid">
				<uni-icon class="scan"  type="scan" size="30"></uni-icon>
			</div> -->
			<image class="avator" @click="tochangeInfo" :src="userInfoTemp.avator"></image>
		    <!-- <img class="avator" src="../../static/img/avator.png" alt=""> -->
			<div class="name" v-if="userInfo.uid" @click="tochangeInfo">
				<!-- <div>张益达</div> -->
				<!-- <div>{{dealTel(userInfo.tel)}}</div> -->
				<div>{{dealedTel}}</div>
				<div>会员等级 : {{userInfo.level}} 级</div>
			</div>
			<div class="login-box" v-if="!userInfo.uid">
				<button  type="primary" class="primary login" @tap="bindLogin">登录</button>
			</div>
			<div class="scanbox" v-if="userInfo.uid">
				<uni-icon class="scan" @click="scanFun()" type="scan" size="30"></uni-icon>
			</div>
		</div>
       <!-- <view class="btn-row">
            <button v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
        </view> -->
		<!-- <div class="coupon">
			<div class="coupon-item yue">余额：0</div>
			<div class="coupon-item">优惠券：0</div>
		</div> -->
		<div class="integral">
			<div class="item">
				<div class="border"></div>
				<div>押金</div>
				<div>{{userInfoTemp.deposit}}</div>
			</div>
			<div class="item">
				<div class="border"></div>
				<div>积分</div>
				<div>{{userInfoTemp.totalPoint}}</div>
			</div>
			<div class="item" @click="toView('charge/charge')">
				<div class="border"></div>
				<div>充值金</div>
				<div>{{userInfoTemp.balance}}</div>
			</div>
			<div class="item">
				<div>点金券</div>
				<div>{{userInfoTemp.coupon}}</div>
			</div>
		</div>
		<view class="uni-list">
			<view class="uni-list-cell" >
				<view @click="toView('../records/chargeRecords')" class="uni-list-cell-navigate uni-navigate-right">
					充值记录
				</view>
			</view>
			<view class="uni-list-cell" >
				<view @click="toView('../records/depositRecords')" class="uni-list-cell-navigate uni-navigate-right">
					押金记录
				</view>
			</view>
			<view class="uni-list-cell" >
				<view @click="toView('../records/leaseRecords')" class="uni-list-cell-navigate uni-navigate-right">
					租赁记录
				</view>
			</view>
			<view class="uni-list-cell" >
				<view @click="toView('../records/spendOnlineRecords')" class="uni-list-cell-navigate uni-navigate-right">
					线上消费记录
				</view>
			</view>
			<view class="uni-list-cell" >
				<view @click="toView('../records/spendUnderlineRecords')" class="uni-list-cell-navigate uni-navigate-right">
					点金券记录
				</view>
			</view>
			<view class="uni-list-cell" >
				<view @click="toView('../records/jifenRecords')" class="uni-list-cell-navigate uni-navigate-right">
					积分明细
				</view>
			</view>
		</view>
		<div v-if="userInfo.uid" >
			<button type="primary" class="changepwd" @click="changepwd">修改密码</button>
			<button type="primary" class="logout" @click="logout">退出登录</button>
		</div>
		
		<div class="company">Copyright © 2018-2019 河北骑享多科技有限公司 All Rights Reserved</div>
		<!-- <div class="tabs-container">
			<div class="tabs-title">
				<div class="tab-item">已领取</div>
				<div class="tab-item">待使用</div>
				<div class="tab-item">历史记录</div>
			</div>
			<div class="tab-content">
				<view class="uni-list">
					<view class="uni-list-cell" v-for="(item,index) in historyList" :key="index">
						<view class="uni-list-cell-navigate ">
							<span class="time">{{item.time}}</span>
							<span class="money">{{item.money}}</span>
						</view>
					</view>
				</view>
			</div>
		</div> -->
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
	import uniIcon from "@/components/uni-icon.vue"
	
    export default {
		components:{ uniIcon },
        computed: {
            ...mapState(['hasLogin', 'forcedLogin','userInfo']),
			dealedTel(){
				let name = this.userInfoTemp.name || this.userInfoTemp.nickname
				name = name ? name : this.userInfo.name
				return name
				// return this.userInfo.tel.substr(0,3)+'*****'+this.userInfo.tel.substr(8,11)
			}
        },
		data(){
			return {
				historyList:[
					{ time:'2018-11-11',money:'20' },
					{ time:'2018-11-20',money:'25' },
					{ time:'2018-11-30',money:'30' }
				],
				userInfoTemp:{
					uid:'',
					deposit:0,
					totalPoint:0,
					coupon:0,
					balance:0,
					avator:'../../static/img/logo2.jpg'
				}
			}
		},
        methods: {
            ...mapMutations(['logout','setName','setAvator','setAddress','setUid']),
			tochangeInfo(){
			   	if(this.userInfo.uid){
					uni.navigateTo({
					    url: 'changeUserInfo/changeUserInfo',
					});
				}else{
					uni.navigateTo({
					    url: '../login/login',
					});
				}
			},
			toView(url){
				let path = this.$store.state.userInfo.uid ? url : '../login/login'
				uni.navigateTo({
					url:path
				})
			},
			dealTel(tel){
				let t = tel.substr(0,3)+'*****'+tel.substr(8,11)
				return t	
			},
            bindLogin() {
                uni.navigateTo({
                    url: '../login/login',
                });
            },
            bindLogout() {
                this.logout();
                /**
                 * 如果需要强制登录跳转回登录页面
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../login/login',
                    });
                }
            },
			scanFun(){
// 				uni.navigateTo({
// 				    url: 'payStore/payStore?bid=22',
// 				});
// 				return
				uni.scanCode({
					success: function (res) {
						uni.navigateTo({
						    url: 'payStore/payStore?bid='+res.result,
						});
					}
				});
			},
			getUserInfo(){
				let that = this
				uni.request({
					url: this.httpUrl + 'user/queryOneByPk',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id:that.userInfo.uid
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							that.userInfoTemp = res.data.data
							that.userInfoTemp.avator = res.data.data.headurl ? res.data.data.headurl : '../../static/img/logo2.jpg'
						    that.userInfoTemp.coupon = that.userInfoTemp.coupon ? that.userInfoTemp.coupon :0
							that.setName(that.userInfoTemp.name)
							that.setAvator(that.userInfoTemp.headurl)
							that.setAddress(that.userInfoTemp.address)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
		    logout(){
				this.setUid('')
				uni.removeStorageSync('uid');
				uni.reLaunch({
					url: '../login/login?logout=1'
				})
				
				console.log(this.userInfo);
			},
			changepwd(){
				uni.navigateTo({
					url: '../changePwd/changePwd'
				})
			},
			findpwd(){
			
			}
        },
		onShow() {
			let uid = this.userInfo.uid || uni.getStorageSync('uid');
			console.log(this.userInfo)
			if(uid){
				this.userInfo.uid = uid
				this.getUserInfo()
			}
			// else{
			// 	uni.removeStorageSync('uid');
			// 	this.userInfoTemp = {
			// 		uid:'',
			// 		deposit:0,
			// 		totalPoint:0,
			// 		coupon:0,
			// 		balance:0,
			// 		avator:'../../static/img/logo2.jpg'
			// 	}
			// 	this.userInfo = {
			// 		uid:'',
			// 		deposit:0,
			// 		totalPoint:0,
			// 		coupon:0,
			// 		balance:0,
			// 		avator:'../../static/img/logo2.jpg'
			// 	}
			// }
		},
		mounted() {
			
		}
    }
</script>
